<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="7" :sm="6" :md="7" :lg="7" :xl="7">
          <div class="search">
            <div class="search-title">床位管理：</div>
            <el-row :gutter="10">
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="search-block">
                  <span>楼栋</span>
                  <el-select
                    v-model="selectForm.building_id"
                    clearable
                    placeholder="楼栋"
                    filterable
                    size="medium"
                    @change="handleSelectBuilding"
                  >
                    <el-option
                      v-for="(item, index) in buildingData"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="search-block">
                  <span>楼层</span>
                  <el-select
                    v-model="selectForm.floor_id"
                    clearable
                    placeholder="楼层"
                    filterable
                    size="medium"
                    @change="handleSelectFloor"
                  >
                    <el-option
                      v-for="(item, index) in floorData"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <div class="search-block">
                  <span>类型</span>
                  <el-select
                    v-model="selectForm.bedType"
                    clearable
                    placeholder="类型"
                    filterable
                    size="medium"
                    @change="handleSelectBedType"
                  >
                    <el-option
                      v-for="(item, index) in bedTypeData"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <template v-for="(item, index) in pageData.list">
      <div :key="index">
        <div class="warning-type clearfix">
          <h3 class="fl">
            {{ item.room_code }}房（{{ item.name }}）
            <span>{{ item.price }}元/月</span>
          </h3>
          <div class="fr frbtn">
            <el-button size="mini" type="danger" @click="deleteRoom(item.id)">
              删除房间
            </el-button>
          </div>
        </div>
        <div class="card-container">
          <el-row :gutter="20">
            <el-col
              v-for="(bedItem, bedIndex) in item.bed_list"
              :key="bedIndex"
              :xs="24"
              :sm="12"
              :md="6"
              :lg="4"
              :xl="4"
            >
              <el-card
                shadow="hover"
                :class="
                  bedItem.status == 2
                    ? backgroundColor[0]
                    : bedItem.status == 1
                    ? backgroundColor[2]
                    : backgroundColor[1]
                "
              >
                <div slot="header" class="header">
                  <span>{{ bedItem.bed_code }}床</span>
                  <span @click="handleElderDetail(bedItem.e_id)">
                    {{
                      bedItem.status == 1
                        ? "床位空闲"
                        : bedItem.status == 2
                        ? "有人入住"
                        : "有人预约"
                    }}
                    <i>查看</i>
                  </span>
                </div>
                <div style="width: 100%">
                  <div class="status">
                    <span :data-id="bedItem.id" @click="handleEquip">
                      设备管理
                    </span>
                    <span :data-id="bedItem.id" @click="handleNurse">
                      护工管理
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    <el-pagination
      :background="background"
      :current-page="pageNo"
      :layout="layout"
      :page-size="pageData.page_size"
      :total="pageData.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog
      title="房间管理"
      :visible.sync="dialogVisibleRoom"
      width="35%"
      :before-close="closeDialogRoom"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <room-form></room-form>
      </div>
    </el-dialog>
    <el-dialog
      title="设备管理"
      :visible.sync="dialogVisibleEq"
      width="60%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                @click="handleAddEq"
              >
                新增
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="data"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="handleEditEq(scope.$index, scope.row)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteEq(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        width="30%"
        title="新增设备"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form
          ref="sbForm"
          :model="sbForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="设备名称" prop="gender">
                <el-input v-model="sbForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="设备编号" prop="gender">
                <el-select
                  v-model="sbForm.gender"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="mini">
            提 交
          </el-button>
          <el-button type="info" class="setBtn" size="mini">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      title="护工管理"
      :visible.sync="dialogVisibleNurse"
      width="60%"
      :before-close="closeDialogNurse"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                :data-id="bed_id"
                @click="handleAddNurse"
              >
                新增
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="data2"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="handleEditNurse(scope.$index, data2)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteNurse(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        width="30%"
        title="新增护工"
        :visible.sync="innerVisibleNurse"
        :before-close="closeVisibleNurse"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="hsForm"
          :model="hsForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工姓名" prop="c_id">
                <el-select
                  v-model="hsForm.c_id"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入姓名"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in nurseData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工工号" prop="c_id">
                <el-input v-model="hsForm.c_id" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveNurse"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('hsForm')"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      width="28%"
      :title="elderData.base.name"
      :visible.sync="elderTk"
      append-to-body
      class="elderTk"
      :close-on-click-modal="false"
    >
      <div class="elderWrapper">
        <div class="elderAvatar">
          <img
            :src="
              elderData.base.profile
                ? elderData.base.profile
                : require('@/assets/images/avatar.jpg')
            "
            alt=""
          />
        </div>
        <div class="elderInfo">
          <p>
            姓名：
            <span>{{ elderData.base.name }}</span>
          </p>
          <p>
            性别：
            <span>{{ elderData.base.sex | sexFilter }}</span>
          </p>
          <p>
            年龄：
            <span>{{ elderData.base.age }}</span>
          </p>
          <p>
            电话：
            <span>{{ elderData.base.mobile }}</span>
          </p>
          <p>
            身份证：
            <span>{{ elderData.base.id_card }}</span>
          </p>
          <p>
            老人类型：
            <span>{{ elderData.base.type | typeFilter }}</span>
          </p>
          <p>
            监护人：
            <span>{{ elderData.family.name }}</span>
          </p>
          <p>
            地址：
            <span>{{ elderData.base.address }}</span>
          </p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import roomForm from "@/components/CommonForm/roomForm";
  import { getRoom } from "@/api/building";
  import { getList } from "@/api/bedList";
  import { getOlder } from "@/api/oldermanager";
  import { getBedType } from "@/api/bedType";
  import { setNurse, getHgList, getNurseList } from "@/api/nursemanager";
  import { getBuilding, getFloor } from "@/api/building";
  import dictData from "@/utils/dictionary";
  const dict = dictData;
  export default {
    name: "Index",
    components: { roomForm },
    filters: {
      sexFilter(value) {
        if (value == 1) {
          return "男";
        } else if (value == 2) {
          return "女";
        } else {
          return "未填写";
        }
      },
      typeFilter(value) {
        for (let i = 0; i < dict.olderType.length; i++) {
          const element = dict.olderType[i];
          if (value == i + 1) {
            return element;
          }
        }
      },
    },
    data() {
      return {
        bed_id: "",
        pageNo: 0,
        pageSize: 10,
        layout: "total, prev, pager, next, jumper",
        total: 0,
        building_id: "",
        floor_id: "",
        bedType_id: "",
        loading: false,
        elderTk: false,
        background: true,
        dialogVisible: false,
        dialogVisibleBed: false,
        dialogVisibleLive: false,
        dialogVisibleRoom: false,
        dialogVisibleEq: false,
        innerVisible: false,
        dialogVisibleNurse: false,
        innerVisibleNurse: false,
        nurseData: [],
        bedTypeData: [],
        buildingData: [],
        floorData: [],
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        formData: {},
        sbForm: {},
        hsForm: {},
        elderData: {
          base: {},
          family: {},
        },
        data: [
          {
            name: "赖美云",
            num: "9022222",
          },
        ],
        data2: [],
        rules: {},
        pageData: {},
        selectForm: {},
        tableColumns: [
          { prop: "name", label: "设备名称" },
          { prop: "num", label: "设备编号" },
        ],
        tableColumns2: [
          { prop: "name", label: "护士姓名" },
          { prop: "c_id", label: "护士工号" },
        ],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
      this.getNurseData();
      this.getBuildingData();
      this.getBedTypeData();
    },
    methods: {
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp.data.list;
            this.building_id = this.buildingData[0].id;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp.data.list;
            this.floor_id = this.floorData[0].id;
          }
        });
      },
      getBedTypeData(data) {
        getBedType("get", data).then((resp) => {
          if (resp.code === 200) {
            this.bedTypeData = resp.data.list;
            this.bedType_id = this.bedTypeData[0].id;
          }
        });
      },
      handleSelectBuilding(id) {
        let params = {
          building_id: id,
        };
        this.selectForm = {};
        this.selectForm.page_size = 4;
        this.selectForm.building_id = id;
        if (id) this.getFloorData(params);
        this.getTableData();
      },
      handleSelectFloor(id) {
        this.getTableData();
      },
      handleSelectBedType(id) {
        this.getTableData();
      },
      saveNurse() {
        this.$refs["hsForm"].validate(async (valid) => {
          if (valid) {
            if (this.hsForm.id) {
              setNurse("put", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                }
              });
            } else {
              setNurse("post", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                }
              });
            }
          }
        });
      },
      getTableData() {
        this.selectForm.page_size = 4;
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
          }
        });
      },
      getNurseData() {
        let params = {
          page_size: 1000,
        };
        getHgList("get", params).then((resp) => {
          if (resp.code === 200) {
            this.nurseData = resp.data.list;
          }
        });
      },
      getNurseList(data) {
        getNurseList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.data2 = resp.data.list;
          }
        });
      },
      remoteMethod(query) {
        let _this = this;
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            let data = {
              name: query,
            };
            getHgList("get", data).then((resp) => {
              if (resp.code === 200) {
                console.log(resp);
                _this.loading = false;
                _this.nurseData = resp.data.list;
              }
            });
          }, 200);
        } else {
          this.getNurseData();
        }
      },
      handleSizeChange(val) {},
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      handleRoom() {
        this.dialogVisibleRoom = true;
      },
      closeDialogRoom() {
        this.dialogVisibleRoom = false;
      },
      deleteRoom(id) {
        this.$confirm("此操作将永久删除该房间, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getRoom("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleEquip() {
        this.dialogVisibleEq = true;
      },
      handleEditEq() {},
      handleAddEq() {
        this.innerVisible = true;
      },
      closeDialogEq() {
        this.dialogVisibleEq = false;
      },
      handleDeleteEq() {},
      handleNurse(e) {
        let id = e.currentTarget.dataset.id;
        this.dialogVisibleNurse = true;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        let params = {
          bed_id: id,
        };
        this.getNurseList(params);
      },
      cancel(formName) {
        this.innerVisibleNurse = false;
        this.$refs[formName].resetFields();
        this[formName] = {};
      },
      closeVisibleNurse() {
        this.innerVisibleNurse = false;
        this.$refs["hsForm"].resetFields();
        this["hsForm"] = {};
      },
      handleAddNurse(e) {
        let id = e.currentTarget.dataset.id;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        this.innerVisibleNurse = true;
      },
      closeDialogNurse() {
        this.dialogVisibleNurse = false;
        this.data2 = [];
      },
      handleEditNurse(index, data) {
        console.log(index, data);
        this.innerVisibleNurse = true;
        this.hsForm = Object.assign({}, data[index]);
      },
      handleDeleteNurse(id) {
        this.$confirm("此操作将永久删除该护工, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getNurseList("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  bed_id: this.bed_id,
                };
                this.getNurseList(params);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleElderDetail(id) {
        let params = {
          id: id,
        };
        getOlder("get", params).then((resp) => {
          if (resp.code === 200) {
            this.elderTk = true;
            this.elderData = resp.data;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff !important;
    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;
      .search {
        display: flex;
        .search-title {
          flex: 0 0 82px;
          width: 82px;
          line-height: 36px;
          font-size: 16px;
          color: #333;
        }
        .search-block {
          display: flex;
          span {
            flex: 0 0 36px;
            width: 36px;
            line-height: 36px;
            color: #333;
          }
        }
      }
    }
    .warning-type {
      width: 100%;
      height: 48px;
      padding: 0 20px;
      line-height: 48px;
      box-sizing: border-box;
      margin-bottom: 12px;
      background: #f6f7fa;
      h3 {
        font-size: 20px;
        color: #1791ff;
        font-weight: 500;
        span {
          font-size: 16px;
          color: #ff4d50;
        }
      }
      .frbtn {
        height: 48px;
        margin-left: 16px;
        line-height: 48px;
      }
    }
    .card-container {
      margin-bottom: 10px;
      .el-card {
        border-radius: 4px;
        cursor: pointer;
        ::v-deep {
          .el-card__header {
            height: 44x;
            line-height: 44px;
            padding: 0 12px;
            background: #18ba39;
          }
          .el-card__body {
            padding: 12px;
            height: 48px;
            box-sizing: border-box;
            text-align: center;
            .num,
            .type,
            .price {
              margin-bottom: 12px;
              font-size: 16px;
              color: #333;
              line-height: 24px;
            }
            .price {
              color: #ff4d50;
            }
            .status {
              display: flex;
              line-height: 24px;
              span {
                flex: 1;
                color: #1791ff;
              }
            }
          }
        }
      }
      .el-card.colorType0 {
        ::v-deep {
          .el-card__header {
            background: #18ba39;
          }
        }
      }
      .el-card.colorType1 {
        ::v-deep {
          .el-card__header {
            background: #e0c720;
          }
        }
      }
      .el-card.colorType2 {
        ::v-deep {
          .el-card__header {
            background: #999999;
          }
        }
      }
      .header {
        position: relative;
        color: #fff;
        display: flex;
        span {
          flex: 1;
          text-align: center;
          font-size: 18px;
          &:first-child {
            text-align: left;
          }
          i {
            font-style: normal;
            font-size: 12px;
            color: rgba($color: #fff, $alpha: 0.5);
          }
        }
      }
    }
    .card-container-toilet {
      .el-card {
        border-radius: 4px;
        cursor: pointer;
        ::v-deep {
          .el-card__header {
            height: 48px;
            line-height: 48px;
            padding: 0 12px;
            background: #18ba39;
          }
          .el-card__body {
            padding: 0px;
            .item {
              display: flex;
              padding: 22px 16px;
              span {
                flex: 1;
                line-height: 26px;
                color: #fff;
                font-size: 18px;
                vertical-align: middle;
                &:first-child {
                  flex: 0 0 60px;
                  width: 60px;
                }
              }
              .header_icon {
                margin-right: 12px;
                color: #fff;
                font-size: 24px;
              }
            }
          }
        }
      }
      .el-card.colorType0 {
        ::v-deep {
          .el-card__body {
            background: #e0c720;
          }
        }
      }
      .el-card.colorType1 {
        ::v-deep {
          .el-card__body {
            background: #e5362a;
          }
        }
      }
      .el-card.colorType2 {
        ::v-deep {
          .el-card__body {
            background: #c400d2;
          }
        }
      }
      .el-card.colorType3 {
        ::v-deep {
          .el-card__body {
            background: #18ba39;
          }
        }
      }
    }
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }
      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
  }

  .form-footer {
    padding-left: 100px;
  }
  .elderTk {
    ::v-deep {
      .el-dialog {
        background: rgba($color: #0c232f, $alpha: 0.5);
      }
      .el-dialog__header {
        background: rgba($color: #0c232f, $alpha: 0.5);
      }
      .el-dialog__body {
        padding: 15px 15px;
        overflow: hidden;
      }
    }
    .elderWrapper {
      display: flex;
      .elderAvatar {
        flex: 0 0 200px;
        display: flex;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        overflow: hidden;
        border-radius: 5px;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .elderInfo {
        p {
          width: 202px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #fff;
          font-style: 14px;
          line-height: 24px;
          span {
            color: #2cc1bb;
          }
        }
      }
    }
  }
</style>
